<%--
  Created by IntelliJ IDEA.
  User: CM
  Date: 2017/2/25
  Time: 22:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<jsp:include page="../common/header.jsp"></jsp:include>
<body style="background: #efefef;padding: 0.4rem 1rem;width: 100%;display: block;overflow: hidden;">

<div class="row" id="homepage">
    <div class="col-xs-12 col-sm-6 col-md-3">

        <div class="card horizontal cardIcon waves-effect waves-dark">
            <div class="card-image red">
                <i class="fa fa-eye fa-5x"></i>
            </div>
            <div class="card-stacked">
                <div class="card-content">
                    <h3><fmt:formatNumber value="${visitorCount}"></fmt:formatNumber></h3>
                </div>
                <div class="card-action">
                    <strong> 今日访问量</strong>
                </div>
            </div>
        </div>

    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">

        <div class="card horizontal cardIcon waves-effect waves-dark">
            <div class="card-image orange">
                <i class="fa fa-shopping-cart fa-5x"></i>
            </div>
            <div class="card-stacked">
                <div class="card-content">
                    <h3>25,550</h3>
                </div>
                <div class="card-action">
                    <strong> 今日销售额</strong>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">

        <div class="card horizontal cardIcon waves-effect waves-dark">
            <div class="card-image blue">
                <i class="fa fa-comments fa-5x"></i>
            </div>
            <div class="card-stacked">
                <div class="card-content">
                    <h3>0</h3>
                </div>
                <div class="card-action">
                    <strong> 待回复消息</strong>
                </div>
            </div>
        </div>

    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">

        <div class="card horizontal cardIcon waves-effect waves-dark">
            <div class="card-image">
                <i class="fa fa-files-o fa-5x"></i>
            </div>
            <div class="card-stacked">
                <div class="card-content">
                    <h3>0</h3>
                </div>
                <div class="card-action">
                    <strong> 待处理订单</strong>
                </div>
            </div>
        </div>

    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-action">
                <label>收藏的文章</label>
            </div>
            <div class="card-content" id="collect-article">
                <div  v-for="(article,index) in collectArticle" class="article-item">
                    <div class="item-thumb">
                        <%--<img v-bind:src="{{article.head_img}}"/>--%>
                    </div>
                    <%--<span class="item-title">{{article.name}}</span>--%>
                    <%--<span class="item-city">\${flag.city_desc}</span>--%>
                    <i class="fa fa-trash-o" @click="deleteItem(article)"
                       title="点击删除"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-action">
                <label>收藏的商品</label>
            </div>
            <div class="card-content" id="collect-good">
                <div  v-for="(good,index) in collectGood" class="article-item">
                <div class="item-thumb">
                    <%--<img src="{{good.head_img}}"/>--%>
                </div>
                <%--<span class="item-title">{{good.name}}</span>--%>
                <%--<span class="item-city">\${flag.city_desc}</span>--%>
                <i class="fa fa-trash-o" @click="deleteItem(good)"
                   title="点击删除"></i>
            </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-action">
                <label>收藏的商品</label>
            </div>
            <div class="card-content" id="collect-shop">
                <div  v-for="(shop,index) in collectGood" class="article-item">
                    <div class="item-thumb">
                        <%--<img src="{{shop.head_img}}"/>--%>
                    </div>
                    <%--<span class="item-title">{{shop.name}}</span>--%>
                    <%--<span class="item-city">\${flag.city_desc}</span>--%>
                    <i class="fa fa-trash-o" @click="deleteItem(shop)"
                       title="点击删除"></i>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var homePage = new Vue({
        el:"#homepage",
        data:{
            user_id:${uid},
            collectGood:[],
            collectShop:[],
            collectArticle:[]
        },
        methods:{
            loadCollect:function (type) {

                var $this=this;
                var data={user_id:$this.user_id,type:type}
                asyncAjax({
                    url: ctx + "/shop/loadCollect/list?"+$.param(data).replace(/(%5D|%5B)/g, ""),
                    success: function (res) {
                        console.log("res:%o", res);
                        if (res["result"] == "0") {
                            if(!isEmpty(res["data"])){
                                if(type="GOOD"){
                                    $this.collectGood=res["data"];
                                }
                                else if(type="ARTICLE"){
                                    $this.collectArticle=res["data"];
                                }
                                 else if(type="SHOP"){
                                    $this.collectShop=res["data"];
                                }
                                else {
                                    bootbox.alert("收藏类型不正确!");
                                }
                            }
                            else{
                                $("#brandBox").html("<div class='alert alert-warning'>尚未配置代理品牌</div>");
                            }
                        } else {
                            bootbox.alert(res["msg"]);
                        }
                    }
                })

            },
            deleteItem:function(good){
                var data={id:good.id}
                asyncAjax({
                    url: ctx + "/shop/deleCollect?"+$.param(data).replace(/(%5D|%5B)/g, ""),
                    success: function (res) {
                        console.log("res:%o", res);
                        if (res["result"] == "0") {
                            this.loadCollect(good.type)

                        } else {
                            bootbox.alert(res["msg"]);
                        }
                    }
                })
            }

        },
        mounted:function(){
            this.loadCollect("GOOD");
            this.loadCollect("Article");
            this.loadCollect("SHOP");
        }
    })
//$(function () {
//loadCollect("GOOD");
//loadCollect("Article");
//loadCollect("SHOP");
//})
//    function loadCollect(type) {
//     var  data ={type:type}
//     asyncAjax({
//         url: ctx + "/shop/loaCollect/list?",
//         success: function (res) {
//             $("#collect-article").html("");
//             $("collect-good").html("");
//             console.log("res:%o", res);
//             if (res["result"] == "0") {
//                 if(!isEmpty(res["data"])){
//                     if(type="")
//                     $("#brandListTmpl").tmpl(res["data"]).appendTo($("#brandBox"));
//                 }
//                 else{
//                     $("#brandBox").html("<div class='alert alert-warning'>尚未配置代理品牌</div>");
//                 }
//             } else {
//                 bootbox.alert(res["msg"]);
//             }
//         }
//     })
//    }
</script>
</body>
</html>
